<template>
  <div>
    <userTitel :title="title"></userTitel>
    <!-- 卡片1 -->
    <el-card shadow="never">
      <el-form :inline="true">
        <el-form-item label="车辆类型 :">
          <el-select v-model="formObj.truckTypeName" style="width: 282px">
            <el-option
              v-for="item in isTypeForm"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <span style="margin-left: 70px">车牌号码 : </span>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formObj.licensePlate"
            placeholder="请输入车牌号码"
            style="width: 282px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width: 90px; margin-left: 50px; padding-left: 30px"
            type="primary"
            @click="getSeek"
            >搜索</el-button
          >
          <el-button style="width: 90px; padding-left: 30px">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 卡片2 -->
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <!-- 全部 -->
      <el-tab-pane name="2">
        <el-button @click="addCar" type="primary">增加车辆</el-button>
        <template #label>
          <span>全部{{ total }}</span>
        </template>
        <!-- 表格 -->
        <el-table :data="formData" border style="width: 100%; margin-top: 20px">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="licensePlate" label="车牌号码" width="180">
          </el-table-column>
          <el-table-column prop="truckTypeName" label="车辆类型">
          </el-table-column>
          <el-table-column prop="driverNum" label="司机数量"> </el-table-column>
          <el-table-column prop="workStatus" label="车辆状态">
          </el-table-column>
          <el-table-column prop="deviceGpsId" label="GPS设备ID">
          </el-table-column>
          <el-table-column prop="allowableLoad" label="实载重量 (T)">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="实载体积 (方)">
          </el-table-column>
          <el-table-column prop="address" label="操作" width="280">
            <template #default="{ row }">
              <el-link
                @click="EchoInfo(row)"
                :underline="false"
                style="color: #52a7ff"
                >查看详情
              </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" type="primary">停用 </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" style="color: #52a7ff">
                配置司机</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <!-- 可用1 -->
      <el-tab-pane name="1" label="可用">
        <el-button @click="addCar" type="primary">增加车辆</el-button>
        <template #label>
          <span>可用{{ total1 }}</span>
        </template>
        <!-- 表格 -->
        <el-table
          :data="formData1"
          border
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="licensePlate" label="车牌号码" width="180">
          </el-table-column>
          <el-table-column prop="truckTypeName" label="车辆类型">
          </el-table-column>
          <el-table-column prop="driverNum" label="司机数量"> </el-table-column>
          <el-table-column prop="workStatus" label="车辆状态">
          </el-table-column>
          <el-table-column prop="deviceGpsId" label="GPS设备ID">
          </el-table-column>
          <el-table-column prop="allowableLoad" label="实载重量 (T)">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="实载体积 (方)">
          </el-table-column>
          <el-table-column prop="address" label="操作" width="280">
            <template #default="{ row }">
              <el-link
                @click="EchoInfo(row)"
                :underline="false"
                style="color: #52a7ff"
                >查看详情
              </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" type="primary">停用 </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" style="color: #52a7ff">
                配置司机</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+total1"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <!-- 停用0 -->
      <el-tab-pane name="0" label="停用">
        <el-button @click="addCar" type="primary">增加车辆</el-button>
        <template #label>
          <span>停用{{ total2 }}</span>
        </template>
        <!-- 表格 -->
        <el-table
          :data="formData2"
          border
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="licensePlate" label="车牌号码" width="180">
          </el-table-column>
          <el-table-column prop="truckTypeName" label="车辆类型">
          </el-table-column>
          <el-table-column prop="driverNum" label="司机数量"> </el-table-column>
          <el-table-column prop="workStatus" label="车辆状态">
          </el-table-column>
          <el-table-column prop="deviceGpsId" label="GPS设备ID">
          </el-table-column>
          <el-table-column prop="allowableLoad" label="实载重量 (T)">
          </el-table-column>
          <el-table-column prop="allowableVolume" label="实载体积 (方)">
          </el-table-column>
          <el-table-column prop="address" label="操作" width="280">
            <template #default="{ row }">
              <el-link
                @click="EchoInfo(row)"
                :underline="false"
                style="color: #52a7ff"
                >查看详情
              </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" type="primary">停用 </el-link>
              <span style="color: #dcdfe6"> | </span>
              <el-link :underline="false" style="color: #52a7ff">
                配置司机</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+total2"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 新增车辆弹层 -->
    <el-dialog title="新增车辆" :visible.sync="showDialog">
      <el-form ref="formRef" :model="formObj" :rules="rules">
        <el-form-item prop="truckTypeName" label="车辆类型 :">
          <el-select v-model="formObj.truckTypeName" style="width: 420px">
            <el-option
              v-for="item in isTypeForm"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="licensePlate" label="车牌号码 : ">
          <el-input
            v-model="formObj.licensePlate"
            placeholder="请输入车牌号码"
            style="width: 420px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="deviceGpsId" label="GPS设备ID : ">
          <el-input
            v-model="formObj.deviceGpsId"
            placeholder="请输入GPS设备ID"
            style="width: 420px"
          ></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button
            style="width: 90px; padding-left: 30px"
            type="primary"
            @click="submit"
            >确认</el-button
          >
          <el-button
            @click="showDialog = false"
            style="width: 90px; padding-left: 30px"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import VehicleIndex from "@/components/vehicle";
import { getDriverList, getTypeList, addCarOne } from "@/api/vehicle";
export default {
  name: "vehicleIndex",
  // components: { VehicleIndex },
  data() {
    return {
      activeName: "2",
      // 弹层
      showDialog: false,
      // 待校验
      formObj: {
        allowableLoad: 0,
        allowableVolume: 0,
        truckTypeName: "",
        licensePlate: "",
        deviceGpsId: "",
      },
      // 校验
      rules: {
        truckTypeName: [{ query: true, massge: "请输入车辆类型" }],
        licensePlate: [{ required: true, message: "请输入车牌号码" }],
        deviceGpsId: [{ required: true, message: "请输入GPS设备ID" }],
      },
      isTypeForm: [],
      title: "车辆列表",
      formData: [{}], //全部
      formData1: [{}], //可用
      formData2: [{}], //停用
      // currentPage4: 4,
      page: {
        page: 1,
        pageSize: 10,
      },
      // workStatus: 0, //状态
      total: 0, //全部
      total1: 0, //可用
      total2: 0, //停用
      // // 回显
      // EchoForm: {},
    };
  },

  created() {
    // this.handleClick();
    this.allList();
    this.isType();
  },

  methods: {
    // 回显数据请求
    EchoInfo(row) {
      console.log(row);
      // this.EchoForm = row;
      // 跳转
      this.$router.push({
        path: "vehicle-detail",
        query: {
          row: JSON.stringify(row),
        },
      });
    },
    // 新增提交
    async submit() {
      const res = await addCarOne(this.formObj);
      console.log(res);
      this.$message.error(res.msg);
    },
    // 新增
    addCar() {
      this.showDialog = true;
    },
    // 选择器
    async isType() {
      const res = await getTypeList();
      // console.log(res);
      this.isTypeForm = res.data;
    },
    // 全部
    async allList() {
      const res = await getDriverList(this.page);
      console.log(res.data.items);
      // console.log(typeof res.data.items);
      this.formData = res.data.items;
      this.total = res.data.counts;
    },
    // 数据列表
    async handleClick(tab) {
      console.log(tab.name);

      if (tab.name === "1") {
        const res = await getDriverList({
          page: this.page.page,
          pageSize: this.page.pageSize,
          workStatus: +tab.name,
        });
        console.log(res.data.counts);
        this.formData1 = res.data.items;
        this.total1 = res.data.counts;
        this.allList();
      } else if (tab.name === "0") {
        const res = await getDriverList({
          page: this.page.page,
          pageSize: this.page.pageSize,
          workStatus: +tab.name,
        });
        // console.log(res.data.counts);
        this.formData2 = res.data.items;
        this.total2 = res.data.counts;
        this.allList();
      }

      // // 全部
      // const res = await getDriverList(this.page);
      // // console.log(res.data.items);
      // // console.log(typeof res.data.items);
      // // this.formData = res.data.items;
      // // this.total = res.data.counts;
      // res.data.items.forEach(async (item) => {
      //   // console.log(typeof item.workStatus);
      //   // 停用
      //   if (item.workStatus === 0) {
      //     const res = await getDriverList({
      //       page: this.page.page,
      //       pageSize: this.page.pageSize,
      //       workStatus: item.workStatus,
      //     });
      //     // console.log(res.data.counts);
      //     this.formData2 = res.data.items;
      //     this.total2 = res.data.counts;
      //     // 可用
      //   } else if (item.workStatus === 1 || tab.name === "1") {
      //     // console.log(item.workStatus === 1);
      //     const res = await getDriverList({
      //       page: this.page.page,
      //       pageSize: this.page.pageSize,
      //       workStatus: +tab.name,
      //     });
      //     console.log(res.data.counts);
      //     this.formData1 = res.data.items;
      //     this.total1 = res.data.counts;
      //   }
      // });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.allList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.page = val;
      this.allList();
    },
    // 查找
    async getSeek() {
      console.log(this.isTypeForm);
      // this.isTypeForm.forEach(async (item) => {
      //   console.log(item.id);
      //   const res = await getDriverList(this.isTypeForm, {
      //     age: this.page.page,
      //     pageSize: this.page.pageSize,
      //     truckTypeId: item.id,
      //   });
      //   console.log(res);
      // });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
  width: 600px !important;
}
::v-deep .el-dialog__body {
  text-align-last: left;
  line-height: 24px;
}
::v-deep .el-dialog__header {
  text-align-last: left;
  line-height: 24px;
  background-color: #f3f4f7;
}
.block {
  margin: 0 auto;
  margin-top: 10px;
}
::v-deep .el-card__body {
  height: 40px;
  line-height: 12px;
  text-align-last: left;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  text-align-last: left !important;
  line-height: 12px;
}
::v-deep .el-tabs__nav-scroll {
  line-height: 55px;
}
::v-deep .el-card__body {
  height: 40px;
  line-height: 12px;
  text-align: left;
}
// ::v-deep .el-card__body {
//   padding: 0 30;
// }

// .el-form-item {
//   margin: 0;
// }

// 1111
// ::v-deep .el-tabs__content {
//   margin-top: 20px;
// }

::v-deep.el-tabs.el-tabs--top.el-tabs--border-card {
  margin-top: 20px !important;
  border: 0;
}

::v-deep .el-tabs__nav-scroll {
  margin-bottom: 15px !important;
  background-color: white;
}

::v-deep .el-tabs__item.is-top.is-active {
  background-color: #ffeeeb;
  border: 0;
}

::v-deep .el-tabs--border-card {
  box-shadow: 0 0px 0px 0 rgb(0 0 0 / 12%), 0 0 0px 0 rgb(0 0 0 / 4%);
}

::v-deep .el-tabs__header.is-top {
  border: 0;
}
</style>
